<script setup>
import {onMounted, ref} from "vue";
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {showMessage} from "../util/utils.js";
import {useRoute, useRouter} from "vue-router";

//定义router对象，该对象中提供了一些路由方法供我们使用，比如router.push(), router.go()
let router = useRouter();
//定义route对象，该对象提供了一些路由属性/字段供我们使用，比如route.path;  route.params; 等等
let route = useRoute();

//定义user对象，初始值是空
let user = ref({})

//验证登录密码的函数
const checkLoginPwd = (rule, value, callback) => {
  //判断是新增用户还是编辑用户
  if (user.value.id > 0) { //用户id有值，是编辑
    if (value) { //密码输入框输入了值
      if (value.length >= 6 && value.length <= 16) { //验证长度
        callback() //正常，登录密码正确
      } else {
        callback(new Error('密码长度为6-16位'))
      }
    } else {
      callback() //正常，登录密码正确
    }
  } else { //新增用户
    if (value) {
      if (value.length >= 6 && value.length <= 16) { //验证长度
        callback() //正常，登录密码正确
      } else {
        callback(new Error('密码长度为6-16位'))
      }
    } else {
      callback(new Error('请输入密码'))
    }
  }
}

//定义user的验证规则
let userRules = ref({
  loginAct : [
    { required: true, message: '账号不能为空', trigger: 'blur' }
  ],
  loginPwd : [
    /*{ required: true, message: '密码不能为空', trigger: 'blur' },*/
    /*{ min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur' }*/
    { validator: checkLoginPwd, trigger: 'blur' }
  ],
  name : [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    //pattern属性里面是写一个正则表达式，用正则表达式进行数据的验证
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名必须是中文汉字', trigger: 'blur' }
  ],
  phone : [
    { required: true, message: '手机号码不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' }
  ],
  email : [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱码格式有误', trigger: 'blur' }
  ],
  accountNoExpired : [
    { required: true, message: '请选择账号是否未过期', trigger: ['blur', 'change'] },
  ],
  credentialsNoExpired : [
    { required: true, message: '请选择密码是否未过期', trigger: ['blur', 'change'] },
  ],
  accountNoLocked : [
    { required: true, message: '请选择账号是否未锁定', trigger: ['blur', 'change'] },
  ],
  accountEnabled : [
    { required: true, message: '请选择账号是否已开启', trigger: ['blur', 'change'] },
  ]
})

//定义一个对象数组
let optionsArr = ref([
  {label : '是', value : 1},
  {label : '否', value : 0},
])

//定义form中的ref属性
const userFormRef = ref()

//添加用户（提交）
const addUserSubmit = (userFormRef) => {
  if (!userFormRef) { //如果formEl不存在，也就是你没有给login()函数传userFormRef参数，那么就return，不做验证了
    return
  }
  userFormRef.validate((valid) => {
    if (valid) { //valid是true表示验证通过，否则没通过
      //参数比较多的时候，用FormData对象封装参数进行提交
      let formData = new FormData();
      for (let field in user.value) {
        if (user.value[field]) { //该字段有值，我们才放入formData中
          formData.append(field, user.value[field]);
        }
      }
      //判断是编辑用户还是添加用户？
      if (user.value.id > 0) { //编辑用户
        doPut('/api/user', formData).then(resp => {
          if (resp.data.code === 200) {
            showMessage('编辑成功', 'success');
            //成功后，跳转到列表页
            router.push("/dashboard/user");
          } else {
            showMessage('编辑失败，原因：' + resp.data.msg, 'error');
          }
        })
      } else { //新增用户
        doPost('/api/user', formData).then(resp => {
          if (resp.data.code === 200) {
            showMessage('添加成功', 'success');
            //成功后，跳转到列表页
            router.push("/dashboard/user");
          } else {
            showMessage('添加失败，原因：' + resp.data.msg, 'error');
          }
        })
      }
    }
  })
}

//返回函数
const goBack = () => {
  router.back();
}

//页面dom元素渲染后执行函数钩子
onMounted(() => {
  let userId = route.params.userId;
  if (userId) {
    //根据userId查询该用户信息
    loadUserInfo(userId);
  }
})

//根据userId查询该用户信息
const loadUserInfo = (id) => {
  doGet('/api/user/' + id, {}).then(resp => {
    if (resp.data.code === 200) {
      user.value = resp.data.data;
      user.value.loginPwd = '';//把后端查询到密码设置为空
    } else {
      //提示一下
      showMessage('数据加载失败', 'error');
    }
  })
}
</script>

<template>
  <el-form
      ref="userFormRef"
      :model="user"
      :rules="userRules"
      :label-position="'right'"
      label-width="auto">

    <el-form-item label="账号" prop="loginAct">
      <el-input v-model="user.loginAct"/>
    </el-form-item>

    <el-form-item label="密码" prop="loginPwd">
      <el-input type="password" v-model="user.loginPwd"/>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name"/>
    </el-form-item>

    <el-form-item label="手机" prop="phone">
      <el-input v-model="user.phone"/>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email"/>
    </el-form-item>

    <el-form-item label="账号是否未过期" prop="accountNoExpired">
      <el-select v-model="user.accountNoExpired" placeholder="请选择">
        <el-option
            v-for="item in optionsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item label="密码是否未过期" prop="credentialsNoExpired">
      <el-select v-model="user.credentialsNoExpired" placeholder="请选择">
        <el-option
            v-for="item in optionsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item label="账号是否未锁定" prop="accountNoLocked">
      <el-select v-model="user.accountNoLocked" placeholder="请选择">
        <el-option
            v-for="item in optionsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item label="账号是否已开启" prop="accountEnabled">
      <el-select v-model="user.accountEnabled" placeholder="请选择">
        <el-option
            v-for="item in optionsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="addUserSubmit(userFormRef)">提 交</el-button>
      <el-button type="success" plain @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>